<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            font-family: arial;
        }
        body {
            background-color: #191f26;
            padding: 0;
            margin: 0;
            text-align: center;
            font-family: arial;
            /*=============================*/

            color: #fff;
        }
        .jar {
            position: relative;
            width: 200px;
            margin: 100px auto 0;
            text-align: center;
        }
        .jar .mouth {
            width: 40px;
            height: 10px;
            margin: 0 auto -1px;
            border-right: 4px solid #fff;
            border-left: 4px solid #fff;
            -moz-border-radius: 20px;
            -webkit-border-radius: 20px;
            border-radius: 20px;
        }
        .jar .neck {
            width: 35px;
            height: 45px;
            margin: 0 auto -5px;
            z-index: 7;
            position: relative;
            background-color: #191f26;
            border-right: 4px solid #fff;
            border-left: 4px solid #fff;
        }
        .jar .bubble {
            width: 10px;
            height: 10px;
            position: absolute;
            background-color: #35eefb;
            opacity: 0.4;
            left: 92px;
            z-index: 8;
            top: 110px;
            -moz-border-radius: 100%;
            -webkit-border-radius: 100%;
            border-radius: 100%;
            -moz-animation: buble 2s linear 1s infinite;
            -webkit-animation: buble 2s linear 1s infinite;
            animation: buble 2s linear 1s infinite;
        }
        .jar .bubble + .bubble {
            left: 87px;
            top: 120px;
            width: 15px;
            height: 15px;
            -moz-animation-duration: 3s;
            -webkit-animation-duration: 3s;
            animation-duration: 3s;
        }
        .jar .base {
            margin: auto;
            width: 120px;
            height: 100px;
            border: 4px solid #fff;
            -moz-border-radius: 50%;
            -webkit-border-radius: 50%;
            border-radius: 50%;
            overflow: hidden;
            position: relative;
            z-index: 5;
        }
        .jar .base .bubble {
            left: 15px;
            top: 50px;
            -moz-animation: bounce 2.3s linear 0s infinite alternate;
            -webkit-animation: bounce 2.3s linear 0s infinite alternate;
            animation: bounce 2.3s linear 0s infinite alternate;
        }
        .jar .base .bubble + .bubble {
            left: 75px;
            top: 40px;
            -moz-animation-duration: 3s;
            -webkit-animation-duration: 3s;
            animation-duration: 3s;
        }
        .jar .liquid {
            height: 40px;
            background-color: #35eefb;
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
        }
        .jar .wave {
            width: 60px;
            height: 20px;
            position: absolute;
            background-color: #35eefb;
            left: 0;
            top: 50px;
            -moz-animation: wave 1s linear 1s infinite alternate;
            -webkit-animation: wave 1s linear 1s infinite alternate;
            animation: wave 1s linear 1s infinite alternate;
            -moz-border-radius: 50%;
            -webkit-border-radius: 50%;
            border-radius: 50%;
        }
        .jar .wave + .wave {
            left: auto;
            right: 0;
        }
        @-moz-keyframes wave {
            from {
                -moz-transform: translateX(100px);
                transform: translateX(100px);
            }
            to {
                -moz-transform: translateX(-100px);
                transform: translateX(-100px);
            }
        }
        @-webkit-keyframes wave {
            from {
                -webkit-transform: translateX(100px);
                transform: translateX(100px);
            }
            to {
                -webkit-transform: translateX(-100px);
                transform: translateX(-100px);
            }
        }
        @keyframes wave {
            from {
                -moz-transform: translateX(100px);
                -ms-transform: translateX(100px);
                -webkit-transform: translateX(100px);
                transform: translateX(100px);
            }
            to {
                -moz-transform: translateX(-100px);
                -ms-transform: translateX(-100px);
                -webkit-transform: translateX(-100px);
                transform: translateX(-100px);
            }
        }
        @-moz-keyframes bounce {
            0% {
                -moz-transform: translate(5px, 15px);
                transform: translate(5px, 15px);
            }
            50% {
                -moz-transform: translate(0, -15px);
                transform: translate(0, -15px);
            }
            100% {
                -moz-transform: translate(-5px, -37px);
                transform: translate(-5px, -37px);
                opacity: 1;
            }
        }
        @-webkit-keyframes bounce {
            0% {
                -webkit-transform: translate(5px, 15px);
                transform: translate(5px, 15px);
            }
            50% {
                -webkit-transform: translate(0, -15px);
                transform: translate(0, -15px);
            }
            100% {
                -webkit-transform: translate(-5px, -37px);
                transform: translate(-5px, -37px);
                opacity: 1;
            }
        }
        @keyframes bounce {
            0% {
                -moz-transform: translate(5px, 15px);
                -ms-transform: translate(5px, 15px);
                -webkit-transform: translate(5px, 15px);
                transform: translate(5px, 15px);
            }
            50% {
                -moz-transform: translate(0, -15px);
                -ms-transform: translate(0, -15px);
                -webkit-transform: translate(0, -15px);
                transform: translate(0, -15px);
            }
            100% {
                -moz-transform: translate(-5px, -37px);
                -ms-transform: translate(-5px, -37px);
                -webkit-transform: translate(-5px, -37px);
                transform: translate(-5px, -37px);
                opacity: 1;
            }
        }
        @-moz-keyframes buble {
            0% {
                -moz-transform: translate(3px, 10px);
                transform: translate(3px, 10px);
            }
            25% {
                -moz-transform: translate(0, 0px);
                transform: translate(0, 0px);
            }
            50% {
                -moz-transform: translate(-3px, -25px);
                transform: translate(-3px, -25px);
            }
            75% {
                -moz-transform: translate(0, -50px);
                transform: translate(0, -50px);
                opacity: 1;
            }
            100% {
                -moz-transform: translate(3px, -100px);
                transform: translate(3px, -100px);
                opacity: 0;
            }
        }
        @-webkit-keyframes buble {
            0% {
                -webkit-transform: translate(3px, 10px);
                transform: translate(3px, 10px);
            }
            25% {
                -webkit-transform: translate(0, 0px);
                transform: translate(0, 0px);
            }
            50% {
                -webkit-transform: translate(-3px, -25px);
                transform: translate(-3px, -25px);
            }
            75% {
                -webkit-transform: translate(0, -50px);
                transform: translate(0, -50px);
                opacity: 1;
            }
            100% {
                -webkit-transform: translate(3px, -100px);
                transform: translate(3px, -100px);
                opacity: 0;
            }
        }
        @keyframes buble {
            0% {
                -moz-transform: translate(3px, 10px);
                -ms-transform: translate(3px, 10px);
                -webkit-transform: translate(3px, 10px);
                transform: translate(3px, 10px);
            }
            25% {
                -moz-transform: translate(0, 0px);
                -ms-transform: translate(0, 0px);
                -webkit-transform: translate(0, 0px);
                transform: translate(0, 0px);
            }
            50% {
                -moz-transform: translate(-3px, -25px);
                -ms-transform: translate(-3px, -25px);
                -webkit-transform: translate(-3px, -25px);
                transform: translate(-3px, -25px);
            }
            75% {
                -moz-transform: translate(0, -50px);
                -ms-transform: translate(0, -50px);
                -webkit-transform: translate(0, -50px);
                transform: translate(0, -50px);
                opacity: 1;
            }
            100% {
                -moz-transform: translate(3px, -100px);
                -ms-transform: translate(3px, -100px);
                -webkit-transform: translate(3px, -100px);
                transform: translate(3px, -100px);
                opacity: 0;
            }
        }
    </style>
</head>
<body>
<div class="jar">
    <div class="mouth"></div>
    <div class="neck"></div>
    <div class="base">
        <div class="liquid"> </div>
        <div class="wave"></div>
        <div class="wave"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
    </div>
    <div class="bubble"></div>
    <div class="bubble"></div>
</div>
<p>loading.....</p>
</body>
</html>